<template>
  <div>
    <div class="number">
      <div>
        <span>应用数</span>
        <a href="">410500</a>
      </div>
      <div>
        <span>应用数</span>
        <a href="">410500</a>
      </div>
    </div>
    <div>
      <ul class="data">
        <li>
          <h5 class="h5">1</h5>
          <h5>应收到</h5>
          <h5>得月薪</h5>
        </li>
        <li>
          <h5>化工</h5>
          <a href="">125500</a>
          <a href="">125500</a>
        </li>
        <li>
          <h5>热气</h5>
          <a href="">125500</a>
          <a href="">125500</a>
        </li>
        <li>
          <h5>水费</h5>
          <a href="">125500</a>
          <a href="">125500</a>
        </li>
      </ul>
    </div>
    <div id="lby"></div>
  </div>
</template>

<script>
import { Pie, measureTextWidth } from "@antv/g2plot";
export default {
  mounted() {
    function fn() {
      function renderStatistic(containerWidth, text, style) {
        const { width: textWidth, height: textHeight } = measureTextWidth(
          text,
          style
        );
        const R = containerWidth / 2;
        // r^2 = (w / 2)^2 + (h - offsetY)^2
        let scale = 1;
        if (containerWidth < textWidth) {
          scale = Math.min(
            Math.sqrt(
              Math.abs(
                Math.pow(R, 2) /
                  (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2))
              )
            ),
            1
          );
        }
        const textStyleStr = `width:${containerWidth}px;`;
        return `<div style="${textStyleStr};font-size:${scale}em;line-height:${
          scale < 1 ? 1 : "inherit"
        };">${text}</div>`;
      }

      const data = [
        { type: "分类一", value: 90 },
        { type: "分类二", value: 10 },
      ];

      const piePlot = new Pie("lby", {
        //容器的padding
        appendPadding: 10,
        //容器数据
        data,
        //容器图表得value
        angleField: "value",
        //图表背景得颜色
        colorField: "type",
        //图表边框
        radius: 1,
        //中间黑色圆形的范围百分之几
        innerRadius: 0.80,
        meta: {
          value: {
            formatter: (v) => `${v} ¥`,
          },
        },
        label: {
          type: "inner",
          offset: "-50%",
          style: {
            textAlign: "center",
            color:"red",
              fontSize: "30px",
          },
          autoRotate: false,
          content: "{value}",
        },
        statistic: {
          // title: {
          //   offsetY: -4,
          //   customHtml: (container, view, datum) => {
          //     const { width, height } = container.getBoundingClientRect();
          //     const d = Math.sqrt(
          //       Math.pow(width / 2, 2) + Math.pow(height / 2, 2)
          //     );
          //     // const text = datum ? datum.type : "总计";
          //     return renderStatistic(d, text, { fontSize: 40 });
          //   },
          // },
          content: {
            // offsetY: 4,
            style: {
              fontSize: "30px",
            },
            //计算图表
            customHtml: (container, view, datum, data) => {
              const { width } = container.getBoundingClientRect();

              const text = datum
                ? `¥ ${datum.value}`
                : `¥ ${data.reduce((r, d) => r + d.value, 0)}`;
              return renderStatistic(width, text, { fontSize: 50 });
            },
          },
        },
        // 添加 中心统计文本 交互
        interactions: [
          { type: "element-selected" },
          { type: "element-active" },
          { type: "pie-statistic-active" },
        ],
      });

      piePlot.render();
    }
    fn()
  },
};
</script>

<style>
#lby div canvas{
  width: 100%  !important;
  height: 90% !important;
}
#lby {
  font-size: 40px;
  width: 50%;
}
.h5 {
  opacity: 0;
}
.data {
  display: flex;
  padding: 0 20px;
}
.data li {
  flex: 1;
  list-style: none;
  margin-right: 10px;
  text-align: center;
}
.data li a {
  display: block;
  width: 100%;
  height: 30px;
  line-height: 30px;
  color: #fff;
  background: rgba(255, 255, 255, 0.2);
  margin: 10px;
}
.number {
  display: flex;
}
.number div {
  flex: 1;
  text-align: center;
  line-height: 60px;
}
.number div a {
  font-size: 40px;
  margin-left: 20px;
}
a {
  text-decoration: none;
}
</style>